<template>
  <div class="warranty" v-loading="loading" >
    <el-form @keyup.enter.native="listenEvent()" :model="form" :rules="rules"  ref="form"> 
      <div :class="{'heightIndex': curIndex == 0 }" class="welcome"> 
        <div>
          <el-image :src="registrationImg"></el-image>
          <p class="p1 center"> {{$t('WARRANTYFORM.PAGE1-1')}}</p>
           <div class="btn1 " @click="listenEvent">
             <p class="readMore"><span>{{$t('WARRANTYFORM.PAGE1-3')}} </span><i class="iconfont icon-arrow_2 "></i></p>
          </div>
          
        </div>
      </div>
      <div :class="{'heightIndex': curIndex == 1 }">
        <div>
          <div class="warranty_title_container">
            <i class="iconfont icon-Required"></i>
            <p class="p1">{{$t('WARRANTYFORM.PAGE2-1')}} <span>{{$t('WARRANTYFORM.PAGE2-2')}}</span>{{$t('WARRANTYFORM.PAGE2-3')}} </p>
          </div>
          <el-form-item prop="truename">
            <input v-model="form.truename" :class="{'form_textbox_enter': form.truename}" @change="validateValue('truename')" >
            <span class="form_label" >{{$t('WARRANTYFORM.PAGE2-2')}}</span>
          </el-form-item>
          <div class="btn2">
            <el-button @click="listenEvent"  :class="{'is-disabled': isItemCheck('truename')}">{{$t('CONTACTUS.NEXT')}}</el-button> 
          </div>
        </div>
      </div>
      <div :class="{'heightIndex': curIndex == 2}">
        <div>
          <div class="warranty_title_container">
            <i class="iconfont icon-Required"></i>
            <div>
              <p class="p1 ">{{$t('WARRANTYFORM.PAGE3-1')}}<span>{{$t('WARRANTYFORM.PAGE3-2')}}</span>{{$t('WARRANTYFORM.PAGE3-3')}}</p>
              <p class="p3">{{$t('WARRANTYFORM.PAGE3-4')}}</p>
            </div>
          </div>
          <el-form-item prop="email">
            <input v-model="form.email" @change="validateValue('email')" :class="{'form_textbox_enter': form.email}">
             <span class="form_label" >{{$t('WARRANTYFORM.PAGE3-2')}}</span>
          </el-form-item>
          <div class="btn3">
            <el-button class="back" type="del" @click="backBtnClick">{{$t('CONTACTUS.BACK')}}</el-button> 
            <el-button class="next" @click="listenEvent"  :class="{'is-disabled': isItemCheck('email')}">{{$t('CONTACTUS.NEXT')}}</el-button> 
          </div>
        </div>
      </div>
      <div :class="{'heightIndex': curIndex == 3 }">
        <div>
           <div class="warranty_title_container">
            <i class="iconfont icon-Required"></i>
            <p class="p1">{{$t('WARRANTYFORM.PAGE5-1')}}</p>

          </div>
          <el-form-item  prop="purchased_item">
            <el-select v-model="form.purchased_item" @change="validateValue('purchased_item')" clearable> 
              <el-option v-for="item in purchasedItemList" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <div class="btn3">
            <el-button class="back" type="del" @click="backBtnClick">{{$t('CONTACTUS.BACK')}}</el-button> 
            <el-button class="next" @click="listenEvent" :class="{'is-disabled': isItemCheck('purchased_item')}">{{$t('CONTACTUS.NEXT')}}</el-button> 
          </div>
        </div>
      </div>
      <div :class="{'heightIndex': curIndex == 4 }" >
        <div>
          <div class="warranty_title_container">
            <i class="iconfont icon-Required"></i>
            <p class="p1">{{$t('WARRANTYFORM.PAGE6-1')}}</p>
          </div>
         
          <el-form-item  prop="order_no">
            <input v-model="form.order_no" @change="validateValue('order_no')" :class="{'form_textbox_enter': form.order_no}">
             <span class="form_label" >order number</span>
          </el-form-item>
          <div class="btn3">
            <el-button class="back" type="del" @click="backBtnClick">{{$t('CONTACTUS.BACK')}}</el-button> 
            <el-button class="next"  @click="submitData" :class="{'is-disabled':  isCheck.length != 4}" :loading="isRequest">{{$t('WARRANTYFORM.submit')}}</el-button> 
          </div>
        </div>
      </div>
    </el-form>
    <div class="contronal" v-show="curIndex > 0">
      <el-progress :percentage="percentage" color="#363434" :format="format"></el-progress>
 
    </div>
    <div class="btn_container" v-show="curIndex > 0">
      <span @click="backBtnClick" :class="{'disabled': curIndex < 2 }">
        <i class="iconfont icon-arrow_2"></i>
      </span>
      <span @click="nextBtnClick" :class="{'disabled': curIndex > 3 }">
        <i class="iconfont icon-arrow_2"></i>
      </span>
    </div>

  </div>
</template>
<script>
import { warranty } from '@/api/register.js'
import { timeFormat } from '@/utils/index.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      curIndex: 0,
      loading: false,
      isRequest: false,
      registrationImg: require("@/assets/BONOCH_Tester.png") ,
      purchasedItemList: [
        {value:'Baby Monitor', label: 'Baby Monitor'},
        {value: 'Video Doorbell', label: 'Video Doorbell'},
      ],
      storeList: [
        {value: 'Amazon.us', label: 'Amazon.us'},
        {value: 'Amazon.fr', label: 'Amazon.fr'},
        {value: 'Amazon.de', label: 'Amazon.de'},
        {value: 'Amazon.it', label: 'Amazon.it'},
        {value: 'Amazon.es', label: 'Amazon.es'},
        {value: 'Amazon.co.jp', label: 'Amazon.co.jp'},
        {value: 'Amazon.co.uk', label: 'Amazon.co.uk'},
        {value: 'Amazon.ca', label: 'Amazon.ca'},
        {value: 'Crowdfunding Platforms', label: 'Crowdfunding Platforms'},
        {value: 'Amazon.au', label: 'Amazon.au'},
        {value: 'Amazon.nl', label: 'Amazon.nl'},
        {value: 'Amazon.se', label: 'Amazon.se'},
      ],
      form:{
        truename:"",
        email: '',
        store: '',
        purchased_item: ''
      },
      rules: {
        truename: [
          { required: true, trigger: 'change' }
        ],
        email:[
          { required: true, message:  this.$t('CONTACTUS.ENTEREMAILADDRESS'), trigger: 'blur' },
          { type: 'email', message: this.$t('DEFAULT.CORRECTEMAIL'), trigger: 'blur' }
        ],
       
         purchased_item: [
          { required: true, message: 'Purchased Item is required' , trigger: 'change' }
        ], 
        order_no:  [
          { required: true, message: 'Order number  is required' , trigger: 'change' }
        ], 
      },
      isCheck:[],
      percentage: 0,
      isSubmit: false,
      quesLen: 4
    }
  },
  computed:{
    ...mapGetters(['curSite']),
  },
  methods: {
    format(percentage) {
      return percentage/100 *this.quesLen +this.$t('WARRANTYFORM.of')+this.quesLen+` `+ this.$t('WARRANTYFORM.answered');
    },
    submitData() {
      if(this.isCheck.length == this.quesLen){
        this.addData()
      }
    },
    addData (){
      this.isRequest = true
      let params = this.form
      params.language = this.curSite.site
      params.local_time = timeFormat(new Date()),
      warranty(params).then(res=>{
        if(res.state == 1 ){
          this.$router.push('/warranty_success')
        }
        this.isRequest = false
      })
    },
    nextBtnClick(){
      if(this.curIndex < this.quesLen) {
        this.curIndex += 1
      }
    },
    backBtnClick(){
      if(this.curIndex > 1) {
        this.curIndex -= 1
      }
     
    },
    isItemCheck(item) {
      this.percentage = this.isCheck.length/this.quesLen *100
      return this.isCheck.indexOf(item) == -1
    },
    listenEvent () {
      let value = ''
      switch ( this.curIndex) {
        case 0 :
          this.curIndex += 1
          break;
        case 1 :
          value = !this.isItemCheck('truename')
          if(value) {
            this.curIndex += 1
          }
          break;
        case 2 :
          value = !this.isItemCheck('email')
          if(value) {
            this.curIndex += 1
          }
          break;
        case 3 :
          value = !this.isItemCheck('purchased_item')
          if(value) {
            this.curIndex += 1
          }
          break;
      }
      
    },
        // 表单字段校验
    validateValue(value){
      this.$refs.form.validateField([value], (msg)=>{
        let isInCheck = this.isCheck.indexOf(value) > -1
        if(!msg){ 
          if(!isInCheck) {
            this.isCheck.push(value)
          }
        } else {
          this.isCheck.remove(value)
        }
      })
    },
    setFieldNotNecessary(field){
      let isInCheck = this.isCheck.indexOf(field) > -1
      if(!isInCheck) {
        this.isCheck.push(field)
      }
    },

    
    

  }
}
</script>

<style lang="scss">
@import '@/styles/support/warrantyForm.scss';

</style>